<template>
  <div class="box">
    <section>
      <el-input v-model="title" placeholder="标题"></el-input>
      <div style="border: 1px solid #ccc;">
        <Toolbar
            style="border-bottom: 1px solid #ccc"
            :editor="editor"
            :defaultConfig="toolbarConfig"
            :mode="mode"
        />
        <Editor
            style="height: 550px; overflow-y: hidden;"
            v-model="content"
            :defaultConfig="editorConfig"
            :mode="mode"
            @onCreated="onCreated"
        />
      </div>
      <br>
      <el-button type="primary" @click="publish" class="btn">发布</el-button>
    </section>
    <div class="right">
      <div>
        <el-button type="primary" style="width: 200px" icon="el-icon-edit" @click="jumpEdit()">发布内容</el-button>
      </div>
      <div class="right-main">
        <i class="el-icon-s-data" style="margin-top: 10px" >热帖排行</i>
        <hr style="margin: 5px;background-color: #888888; height:1px; border:none">
        <div v-for="(item,index) in artOrderView" style="display: flex;flex-direction: column; align-items: flex-start;margin-left: 5px;margin-top: 10px">
          <p class="right-title" @click="jump(item)">{{item.title}}</p>
          <p style="margin-left: 10px;font-size: 5px;color: #a6a6a6">浏览数 : {{item.viewNum}}</p>
        </div>
      </div>
    </div>
  </div>

</template>

<script>
import Vue from 'vue'
import {Editor, Toolbar} from '@wangeditor/editor-for-vue'

export default {
  components: {Editor, Toolbar},
  data() {
    return {
      user: this.$sessionGet(),
      editor: null,
      title: '',
      content: '',
      toolbarConfig: {},
      editorConfig: {placeholder: '请输入内容...'},
      mode: 'simple', // or 'simple',‘default’
      article: {},
      artOrderView:[]
    }
  },
  methods: {
    onCreated(editor) {
      this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
    },
    publish() {
      let article = {};
      article.userId = this.user.id;
      if (this.title == '') {
        alert("标题不能为空")
        return;
      }
      article.title = this.title;
      article.text = this.editor.getText();
      article.userLevel = this.user.level;
      article.content = this.editor.getHtml();
      this.$axios.post("articles/publish", this.$qs.stringify(article))
          .then(resp => {
            this.$router.push("/square");
          })
          .catch(error => {
            alert("发布失败")
            console.log(error)
          })
    },
    getOrderView(){
      this.$axios.get("articles/getOrderView")
          .then(resp => {
            let res = resp.data
            this.artOrderView = res.data;
            if(this.artOrderView.length>5){
              this.artOrderView.splice(4,this.artOrderView.length-5);
            }
          })
          .catch(error => {
            console.log(error)
          })
    }
  },
  created() {
    this.getOrderView();
  },
  mounted() {
    // 模拟 ajax 请求，异步渲染编辑器
    setTimeout(() => {
      this.html = '<p>模拟 Ajax 异步设置内容 HTML</p>'
    }, 1500)
  },
  beforeDestroy() {
    const editor = this.editor
    if (editor == null) return
    editor.destroy() // 组件销毁时，及时销毁编辑器
  }
}
</script>
<style src="@wangeditor/editor/dist/css/style.css"></style>
<style scoped>

.right-title{
  margin-left: 10px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  cursor: pointer
}

.right-main{
  margin-top: 20px;
  background-color: #ffffff;
  border-radius: 15px;
}

.right{
  margin-top: 20px;
  margin-right: 20px;
  border-radius: 30px;
  width: 400px;
  height: 400px;
  background: #f1f5f8;
}
.box {
  width: 100%;
  border-radius: 30px;
  display: flex;
  justify-content: center;
}

section {
  background-color: #fff;
  padding: 20px;
  margin: 20px;
  text-align: left;
  border-radius: 20px;
  width: 2500px;
}

.btn {
  width: 200px;
  display: flex;
  justify-content: center;
}
</style>